<template>
  <div class="OrderManageMent">
    <el-tabs v-model="activeName" stretch @tab-click="handleClick">
      <el-tab-pane label="待缴纳定金" name="first">
        <div class="box">
          <el-card class="box-card" v-for="(item,i) in orderList" :key="i" v-if="item.status==0">
            <div slot="header" class="clearfix">
              <span>订单编号：{{item.orderId}}</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="GotoDetail(item)">查看详情</el-button>
            </div>
            <div>
              <div class="item">
                <span class="span">原煤数量(万吨)：<span>{{item.supplyQuantity}}</span></span>
              </div>
              <div class="item">
                <span class="span">总价(元)：{{item.price}}</span>

              </div>
              <div class="item">
                <span class="span">创建时间：{{item.createDate}}</span>
              </div>
              <div class="itembutton">
                <el-button type="success" size="small" @click="ShowBondDiv(item)">缴纳定金</el-button>
                <el-button type="warning" size="small" @click="CancleOrder(item)">撤销订单</el-button>
              </div>
            </div>
          </el-card>
        </div>
        <!--<div>-->
        <!--<el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>-->
        <!--</div>-->
      </el-tab-pane>

      <el-tab-pane label="待收货" name="third">
        <div class="box">
          <el-card class="box-card" v-for="(item,i) in orderList" :key="i" v-if="item.status==1">
            <div slot="header" class="clearfix">
              <span>订单编号：{{item.orderId}}</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="GotoDetail(item)">查看详情</el-button>
            </div>
            <div>
              <div class="item">
                <span class="span">原煤数量(万吨)：<span>{{item.supplyQuantity}}</span></span>
              </div>
              <div class="item">
                <span class="span">总价(元)：{{item.price}}</span>

              </div>
              <div class="item">
                <span class="span">创建时间：{{item.createDate}}</span>
              </div>
              <div class="item">
                <span class="span" style="color:#E6A23C;font-weight:600">待收货</span>
              </div>
            </div>
          </el-card>
        </div>
        <!--<div>-->
        <!--<el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>-->
        <!--</div>-->
      </el-tab-pane>
      <el-tab-pane label="待付款" name="second">
        <div class="box">
          <el-card class="box-card" v-for="(item,i) in orderList" :key="i" v-if="item.status==2">
            <div slot="header" class="clearfix">
              <span>订单编号：{{item.orderId}}</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="GotoDetail(item)">查看详情</el-button>
            </div>
            <div>
              <div class="item">
                <span class="span">原煤数量(万吨)：<span>{{item.supplyQuantity}}</span></span>
              </div>
              <div class="item">
                <span class="span">总价(元)：{{item.price}}</span>

              </div>
              <div class="item">
                <span class="span">创建时间：{{item.createDate}}</span>
              </div>
              <div class="itembutton">
                <el-button type="success" size="small" @click="goRecharge(item)">去付款</el-button>
              </div>
            </div>
          </el-card>
        </div>
        <!--<div>-->
        <!--<el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>-->
        <!--</div>-->
      </el-tab-pane>
      <el-tab-pane label="完成" name="fourth">
        <div class="box">
          <el-card class="box-card" v-for="(item,i) in orderList" :key="i" v-if="item.status==3">
            <div slot="header" class="clearfix">
              <span>订单编号：{{item.orderId}}</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="GotoDetail(item)">查看详情</el-button>
            </div>
            <div>
              <div class="item">
                <span class="span">原煤数量(万吨)：<span>{{item.supplyQuantity}}</span></span>
              </div>
              <div class="item">
                <span class="span">总价(元)：{{item.price}}</span>

              </div>
              <div class="item">
                <span class="span">创建时间：{{item.createDate}}</span>
              </div>
              <div class="item">
                <span class="span" style="color:#67C23A;font-weight:600">订单完成</span>
              </div>
            </div>
          </el-card>
        </div>
        <!--<div>-->
        <!--<el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>-->
        <!--</div>-->
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="Showdetail" width="40%" append-to-body>
      <div>
        <el-descriptions title="商品信息">
          <el-descriptions-item label="供应数量(万吨)">{{propItem.supplyQuantity}}</el-descriptions-item>
          <el-descriptions-item label="热值(KCal/kg)≥">{{propItem.calorificValue}}</el-descriptions-item>
          <el-descriptions-item label="原煤单价(元/吨)">{{propItem.unitPrice}}</el-descriptions-item>
          <el-descriptions-item label="全硫(%)≤">{{propItem.sulfur}}</el-descriptions-item>
          <el-descriptions-item label="全水分(%)≤">{{propItem.waterContent}}</el-descriptions-item>
          <el-descriptions-item label="运费单价(元/吨)">{{propItem.freightUnitPrice}}</el-descriptions-item>
          <el-descriptions-item label="挥发分最低(%)">{{propItem.volatitleMatterDown}}</el-descriptions-item>
          <el-descriptions-item label="挥发分最高(%)">{{propItem.volatitleMatterUp}}</el-descriptions-item>
          <el-descriptions-item label="空干基灰分(%)≤">{{propItem.ashContent}}</el-descriptions-item>
          <el-descriptions-item label="发货港口">{{propItem.port}}</el-descriptions-item>
          <el-descriptions-item label="产地">{{propItem.placeOrigin}}</el-descriptions-item>
          <el-descriptions-item label="报价保证金（元/吨）">{{propItem.bondNumber}}</el-descriptions-item>
          <el-descriptions-item label="所属">{{propItem.supplierName}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Showdetail = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="ShowBond" width="40%" append-to-body>
      <el-descriptions title="缴纳保证金">
        <el-descriptions-item label="账户余额">{{myBondData.accountBalance}}</el-descriptions-item>
        <el-descriptions-item label="未冻结金额">{{myBondData.unfrozenAmount}}</el-descriptions-item>
        <el-descriptions-item label="届约冻结金额">{{myBondData.contractFrozenAmount}}</el-descriptions-item>
        <el-descriptions-item label="本次需缴纳保证金">{{payBond}}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">

        <div v-if="myBondData.unfrozenAmount>payBond">
          <el-button @click="ShowBond = false">取 消</el-button>
          <el-button type="primary" @click="toPayBond">确认缴纳</el-button>
        </div>
        <div v-else>
          <el-button @click="ShowBond = false">取 消</el-button>
          <el-button type="info" @click="ShowBond = false">资金不足以缴纳！</el-button>
        </div>

            </span>
    </el-dialog>

    <div id="paydiv" v-html="payContent">
    </div>
  </div>
</template>

<script>
  import showDetail from "./showDetail";
  import Common from '@/components/common/Common'
  import axios from "axios";

  export default {
    components: {showDetail: showDetail},
    data() {
      return {
        payContent:"",
        activeName: "first",
        Showdetail: false,
        ShowBond: false,
        orderList: [],
        propItem: {},
        currentProp: {},
        payBond: 0,
        myBondData: {},
        msg: [
          {
            a: 1231456,
            b: 20,
            d: 121154,
            c: "2021-10-12",
          },
          {
            a: 1231456,
            b: 20,
            d: 121154,
            c: "2021-10-12",
          },
          {
            a: 1231456,
            b: 20,
            d: 121154,
            c: "2021-10-12",
          },
          {
            a: 1231456,
            b: 20,
            d: 121154,
            c: "2021-10-12",
          },
          {
            a: 1231456,
            b: 20,
            d: 121154,
            c: "2021-10-12",
          },
          {
            a: 1231456,
            b: 20,
            d: 121154,
            c: "2021-10-12",
          },
          {
            a: 1231456,
            b: 20,
            d: 121154,
            c: "2021-10-12",
          },
          {
            a: 1231456,
            b: 20,
            d: 121154,
            c: "2021-10-12",
          },
        ],
      };
    },
    mounted: function () {

      this.loadAllOrderById();//需要触发的函数
      this.getMyBond();
    },
    methods: {
      //调用支付宝
      goRecharge(item) {
        this.propItem = item;
        var oid=this.propItem.orderId+"-"+this.propItem.id+"-"+this.oidrum();
        console.log(oid);
          axios.get(Common.API+'Order/OrderPay', {
            params: {
              oid: oid,
              price: this.propItem.price,
              oname:"订单支付",
            }
          })
            .then(Response => {
              this.payContent=Response.data;
              this.$nextTick(()=>{
                  let form=document.getElementsByName("punchout_form")[0];
                  form.submit();
                }
              )
            });
      },
        oidrum(){
          function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
          }
          return (S4()+"-"+S4());
        },
      handleClick(tab, event) {
        console.log(tab, event);
      },

      GotoDetail(item) {
        this.Showdetail = true
        this.propItem = item;
      },
      CancleOrder(item) {
        this.currentProp = item;
        var data = {
          propId: this.currentProp.propId,
          orderId: this.currentProp.orderId
        };
        var currentThis = this;
        this.$confirm('确认要撤销订单编号为:"' + this.currentProp.orderId + '"吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          // console.log("调用方法去发送请求1",item);
          // console.log("调用方法去发送请求2",data);

          var jsonData = JSON.stringify(data);

          currentThis.axios.post(Common.API+'cbond/cancelOrder', jsonData,
            {headers: {'Content-Type': 'application/json;charset=UTF-8'}})
            .then(response => {
              // console.log("#", response.data);
              if (response.data.code == 200) {
                currentThis.$message(response.data.msg);
                currentThis.loadAllOrderById();

              }
            })
            .catch(function (error) { // 请求失败处理
              currentThis.$message('请求失败！');
              console.log(error);
            });

          // console.log("调用方法去发送请求###");

        }).then(() => {
          //this.msgSuccess(text + "成功");
          console.log("成功后再调用法发刷新数据")
        }).catch(function () {
          //row.status = row.status === "0" ? "1" : "0";
        });
      },
      loadAllOrderById() {
        this.axios.get(Common.API+'Order/loadAllOrder?enid=' + Common.enterpriseInfoBuy.enterpriseId)
          .then(response => {
            this.orderList = response.data.data;
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      },
      ShowBondDiv(item) {
        console.log("当前：", item);
        this.currentProp = item;
        this.ShowBond = true;
        this.payBond = item.bondNumber * item.supplyQuantity * 10000;
      },
      getMyBond() {
        this.axios.get(Common.API+'cbond/getBond?enId=' + Common.enterpriseInfoBuy.enterpriseId)
          .then(response => {
            // console.log("&*&:", response.data.data)
            this.myBondData = response.data.data;
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });

      },
      toPayBond() {//买方缴纳保证金
        var data = {
          enId: Common.enterpriseInfoBuy.enterpriseId,
          propId: this.currentProp.propId,
          orderId: this.currentProp.orderId
        }
        var jsonData = JSON.stringify(data);
        // console.log("bond", jsonData)
        this.axios.post(Common.API+'cbond/payBond', jsonData,
          {headers: {'Content-Type': 'application/json;charset=UTF-8'}})
          .then(response => {
            // console.log("#", response.data);
            if (response.data.code == 200) {
              this.$message(response.data.msg);
              this.ShowBond = false;
              this.loadAllOrderById();

            }
          })
          .catch(function (error) { // 请求失败处理
            this.$message('请求失败！');
            console.log(error);
          });
      },
      cancelOrder() {

      }

    },
  };
</script>

<style>
  .OrderManageMent {
    height: 100%;
    background-color: #EBEEF5;
  }

  .el-tabs .el-tabs__item {
    font-size: 20px;
  }

  .box {
    display: flex;
    flex-wrap: wrap;
  }

  .box-card {
    width: 22%;
    margin-left: 34px;
    margin-bottom: 20px;
  }

  .item {
    display: flex;
    margin-bottom: 5px;
  }

  .itembutton {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .span {
    display: block;
    width: 100%;

  }
</style>
